<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      计算属性
        通过 computed 选项来声明

      计算属性的依赖项
        在计算属性的 getter 函数，使用到的响应式数据，会作为该计算属性的一个依赖，当依赖发生变化时，该计算属性的 getter 函数会重新执行，从而得到一份新的数据
      
      计算属性的缓存
        计算属性的 getter 函数，计算出数据之后，如果依赖没有变化，该 getter 不会重新触发，而是使用之前计算出的结果，也就是有缓存。

      计算属性是只读的
        计算属性不可以赋值，当赋值的时候，会报错。

      可写的计算属性
        声明计算属性时，不要直接写getter函数，而是写成一个对象中有 get 与 set 的形式
        get 就是 getter 函数
        set 就是 setter 函数

      计算属性 VS 函数
        计算属性能实现的功能，通过函数都能实现，只是计算属性有缓存，函数没有。

      1. 页面需要获取水果的数量

     -->

    <div id="app">
      <p>当前水果数组的长度是否为偶数：{{ isEven }}</p>

      <ul>
        <li v-for="item in fruits" :key="item.id">{{ item.name }}</li>
      </ul>

      <p>当前水果数组的长度为：{{ fruits.length }}</p>
      <p>当前水果数组的长度是否为偶数：{{ isEven }}</p>

      <button @click="isEven = '否'">尝试给 isEven 赋值</button>
      <p>firstName: {{ firstName }}</p>
      <p>lastName: {{ lastName }}</p>
      <p>fullName: {{ fullName }}</p>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        // 状态数据、响应式数据
        data: {
          firstName: "张",
          lastName: "三",
          fruits: [
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
          ],
        },
        computed: {
          // key - 计算属性的名字
          // value - 计算属性的 getter 函数（计算出这个计算属性值的一个函数）
          isEven() {
            console.log("isEven getter");
            return this.fruits.length % 2 === 0 ? "是" : "否";
          },

          // fullName() {
          //   return this.firstName + " " + this.lastName;
          // },

          fullName: {
            get() {
              console.log("fullName get");
              return this.firstName + " " + this.lastName;
            },

            // 触发时机，当对 fullName 做赋值时触发
            //    this.fullName = '李 四'
            //    newValue 就是赋的值
            //    虽然提供了 set 函数，但是也不能直接去修改 计算属性，你可以通过修改它的依赖项数据，让 get 哈桑函数重新执行，从而间接的修改计算属性。
            set(newValue) {
              console.log("fullName set", newValue);
              this.firstName = newValue.split(" ")[0];
              this.lastName = newValue.split(" ")[1];
            },
          },
        },

        methods: {
          calcIsEven() {
            console.log("calcIsEven");
            return this.fruits.length % 2 === 0 ? "是" : "否";
          },
        },
      });
    </script>
  </body>
</html>
